import React from 'react';
import { Table, Input, Layout, Divider,  Modal, Button, Select, Form, Tag } from 'antd';
import '../less/index.less';
import { inject, observer } from 'mobx-react';
import OrgDrawer from './OrgDrawer';
import { PlusOutlined } from '@ant-design/icons';
const { Header, Content } = Layout;


function Root({ store }) {
  const formRef = React.createRef();
  const onPagination = (pagination) => {
    store.paginationListOrg(pagination.current, pagination.pageSize);
  };

  const onAddOrg = () => {
    store.showOrgDrawer({});
  };
  /**
   * 删除机构响应函数
   * @param record 机构记录
   */
  const onDeleteOrg = record => {
    Modal.confirm({
      title: '确认删除【' + record.name + '】吗？',
      async onOk() {
        await store.deleteOrg(record);
      },
    });
  };

  const onEditOrg = record => {
    store.showOrgDrawer(record);
  };

  const onSelect = value => {
    formRef.current.setFieldsValue({ name: '' });
    store.searchOrg(value, '');
  };

  const pagination = {
    showSizeChanger: true,
    pageSize: store.orgListData.pageSize,
    current: store.orgListData.pageNo,
    pageSizeOptions: ['10', '20', '50', '100'],
    total: store.orgListData.total,
    showQuickJumper: false,
  };

  const columns = [
    { title: '机构名称', dataIndex: 'name', key: 'name', width: 400 },
    { title: '机构代码', dataIndex: 'code', key: 'code', width: 150 },
    { title: '机构描述', dataIndex: 'remark', key: 'remark' },
    { title: '机构类型', dataIndex: 'typeName', key: 'typeName', width: 150, align: 'center' }, {
      title: '当前状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      align: 'center',
      render: function(text, record) {
        if (record.status == '1') {
          return <Tag color={'#2db7f5'}>启用</Tag>;
        } else {
          return <Tag color={'black'}>停用</Tag>;
        }
      },
    }, {
      title: '操作', width: 200, align: 'center', render: (text, record, index) => {
        let disabled = record.isFixed ? 'disabled' : null;
        return (<span>
            <a onClick={() => onEditOrg(record)}>编辑</a>
            <Divider type="vertical"/>
            <a disabled={disabled} onClick={() => onDeleteOrg(record)}>删除</a>
          </span>);
      },
    }];

  return (
    <Layout className='layout'>
      <Header className='header'>
        <Button type='primary' icon={<PlusOutlined/>} onClick={onAddOrg}>新增</Button>
        <div style={{ float: 'right', paddingBottom: 3 }}>
          <Form ref={formRef} layout="inline" defaultValue={{ orgType: '0' }}>
            <Form.Item name='type'>
              <Select defaultValue="0" onSelect={onSelect}>
                <Select.Option key='0' value='0'>全部</Select.Option>
                {store.orgType.map(function(item, i) {
                  if (!item.code) return;
                  return <Select.Option key={item.code} value={item.code}>{item.name}</Select.Option>;
                })}
              </Select>
            </Form.Item>
            <Form.Item name='name'>
              <Input.Search placeholder="机构名称" style={{ width: 200 }}
                            onSearch={name => store.searchOrg(formRef.current.getFieldValue('type'), name)}/>
            </Form.Item>
          </Form>
        </div>
      </Header>
      <Content className='content'>
        <Table rowKey="id" size={'middle'} loading={store.orgListData.loading}
               dataSource={store.orgListData.dataSource} columns={columns}
               pagination={pagination} onChange={onPagination}/>
        <OrgDrawer/>
      </Content>
    </Layout>
  );
}

export default inject('store')(observer(Root));
